<template>
	<div class="w1200" :class="routeName=='RingPoster'?'ring-top':''">
		<div class="content" :class="routeName=='Poster'?'width1200':''">
			<div class="type-list" v-if="routeName=='Poster'">
				<div class="list-title">
					<img :src="imgIcon" class="img-icon" /> 宣传海报
				</div>
				<div class="type-list-inner">
					<p class="list-item" v-if="item.hide==false" @click="searchData.productType=item.val,search()" :class="item.val==searchData.productType?'selected-type':''" v-for="(item,index) in typeList">{{item.name}}</p>
				</div>
			</div>
			<div class="poster-content">
				<div class="poster-top clear">
					<div class="left">
						<div class="form-item">
							<p class="form-item-title">排序：</p>
							<div class="form-item-content">
								<el-select @change="search" clearable v-model="searchData.orderbyflag" placeholder="按时间">
									<el-option key="1" label="按最新时间" value="newtimedesc"></el-option>
									<el-option key="2" label="按历史时间" value="oldtimedesc"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item">
							<p class="form-item-title">类型：</p>
							<div class="form-item-content" style="width: auto;">
								<el-radio-group @change="search" v-model="searchData.fileType">
									<el-radio-button  label="">全部</el-radio-button>
							      <el-radio-button label="1">图片</el-radio-button>
							      <el-radio-button label="2">视频</el-radio-button>
							    </el-radio-group>
								<!--<el-select @change="search" clearable v-model="searchData.fileType" placeholder="全部">
									<el-option key="1" label="图片" value="1"></el-option>
									<el-option key="2" label="视频" value="2"></el-option>
								</el-select>-->
							</div>
						</div>
					</div>
					<div class="right">
						<el-button v-if="!selectMode" @click="selectMode=true" type="primary" size="small">批量下载</el-button>
						<template v-else>
							<el-button type="default" @click="cancelSelect" size="small">取消</el-button>
							<el-button type="primary" size="small" @click="confirmDownload">确认下载</el-button>
						</template>
					</div>
				</div>
				<div class="poster-list">
					<div class="poster-list-inner">
						<div class="poster-wrap" id="posterList">
							<p v-if="loading" class="loading">加载中...</p>
							<div class="poster-item" v-for="(item,index) in list">
								<div style="width: 100%;height: 300px;position: relative;">
									<div class="poster-box" @click="share(item)">
										<div class="resource-wrap">
											<img class="center" v-if="item.fileType==1" :src="item.imgurl" alt="" />
											<video class="center" v-if="item.fileType==2" :src="item.imgurl"></video>
										</div>
										<div class="hover-wrap">
											<p class="time">{{item.inputtime}}</p>
											<p class="desc" :title="item.localcontent">{{item.localcontent}}</p>
											<input readonly="" class="desc-input" v-model="item.localcontent" :id="'posterDesc'+index"></input>
											<p @click.stop :data-clipboard-target="'#posterDesc'+index" v-clipboard class="copy-btn">复制文案</p>
										</div>
										<i v-if="item.fileType==2" @click.stop="playVideo(item.imgurl)" class="el-icon-video-play center"></i>
									</div>

									<div v-if="selectMode" class="select-box" :class="item.selected?'selected':''" @click="item.selected=!item.selected">
										<div class="poster-check-box">
											<img v-if="item.selected" :src="selectedIcon" class="selected-icon" />
										</div>
									</div>
								</div>

								<div class="poster-btn-wrap">
									<p class="poster-btn" @click="share(item)">分享</p>
									<p class="poster-btn primary" @click="batchDownload(item.posterid)">下载</p>
								</div>
							</div>
							<div v-if="!loading&&!list.length" class="no-poster">
								<img :src="noPoster" class="no-poster-img"/>
								<p class="no-poster-text">暂无内容</p>
							</div>
						</div>
					</div>
				</div>
				<div class="poster-bottom">
					<el-pagination v-if="!loading&&list.length" :page-size="searchData.shownum" :page-sizes="[10,15,20,30,50,100]" :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
					</el-pagination>
					<div v-if="routeName=='Poster'" class="btn-wrap flex flex-align-center flex-justify-center">
						<el-button @click="back" size="medium" type="primary">返回</el-button>
					</div>
				</div>
				<div class="recomend-block" v-if="routeName!='Poster'">
					<div class="recomend-title">
						每日推荐
					</div>
					<p v-if="!recommendList.length" style="height: 200px;line-height: 200px;font-size: 16px;color: #666;">暂无推荐</p>
					<template v-if="recommendList.length">
						<swiper class="swiper-no-swiping" :options="swiperOption" ref="mySwiper">
							<!-- slides -->
							<swiper-slide class="poster-list" :key="idx" v-for="idx in Math.ceil(recommendList.length/5)">
								<div class="poster-item" v-if="recommendList[(idx-1)*5+item-1]" v-for="(item, index) in 5" :key="index">
									<div style="width: 100%;height: 300px;position: relative;">
										<div class="poster-box" @click="share(recommendList[(idx-1)*5+item-1])">
											<div class="resource-wrap">
												<img class="center" v-if="recommendList[(idx-1)*5+item-1].fileType==1" :src="recommendList[(idx-1)*5+item-1].imgurl" alt="" />
												<video class="center" v-if="recommendList[(idx-1)*5+item-1].fileType==2" :src="recommendList[(idx-1)*5+item-1].imgurl"></video>
											</div>
											<div class="hover-wrap">
												<p class="time">{{recommendList[(idx-1)*5+item-1].productname}}</p>
												<p class="desc" :title="recommendList[(idx-1)*5+item-1].localcontent">{{recommendList[(idx-1)*5+item-1].localcontent}}</p>
												<input readonly="" class="desc-input" v-model="recommendList[(idx-1)*5+item-1].localcontent" :id="'posterDesc1'+((idx-1)*5+item-1)"></input>
												<p @click.stop :data-clipboard-target="'#posterDesc1'+((idx-1)*5+item-1)" v-clipboard class="copy-btn">复制文案</p>
											</div>
											<i v-if="recommendList[(idx-1)*5+item-1].fileType==2" @click.stop="playVideo(recommendList[(idx-1)*5+item-1].imgurl)" class="el-icon-video-play center"></i>
										</div>
									</div>

									<div class="poster-btn-wrap">
										<p class="poster-btn" @click="share(recommendList[(idx-1)*5+item-1])">分享</p>
										<p class="poster-btn primary" @click="batchDownload(recommendList[(idx-1)*5+item-1].posterid)">下载</p>
									</div>
								</div>
							</swiper-slide>
						</swiper>
						<div v-if="recommendList.length>5" class="swiper-button-wrap">
							<div class="swiper-button-next" slot="button-next"></div>
							<div class="swiper-button-prev" slot="button-prev"></div>
						</div>
					</template>

				</div>
			</div>

		</div>

		<el-dialog title="分享" top="15vh" :visible.sync="shareVisible" width="580px">
			<div class="share-content flex flex-justify-between">
				<div class="img-wrap">
					<img class="center" @click="viewImage(selectObj.imgurl)" :src="selectObj.imgurl" v-if="selectObj.fileType==1" alt="" />
					<video class="center" :src="selectObj.imgurl" v-if="selectObj.fileType==2"></video>
					<i @click="playVideo(selectObj.imgurl)" v-if="selectObj.fileType==2" class="el-icon-video-play center"></i>
				</div>
				<div class="code-block">
					<div class="share-title">微信扫码分享</div>
					<div class="code-wrap" id="qrcode">
						<!--<img @click="viewImage(selectObj.qrcode)" :src="selectObj.qrcode" class="center" alt="" />-->
					</div>
					<p class="share-desc" :class="selectObj.localcontent&&selectObj.localcontent.length>16?'text-left':''">{{selectObj.localcontent}}</p>
					<input id="shareDesc" :value="selectObj.localcontent" type="text" />
					<p class="copy-btn2" data-clipboard-target="#shareDesc" v-clipboard>复制文案</p>
				</div>
			</div>
		</el-dialog>

		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
		<form target="rfFrame" style="display: none;" ref="form" :action="(location.host.includes('localhost')?'/api':location.host.includes('xnh.xnhkfpt.com')?'//xnh.xnhkfpt.com/vueapi/api':'//xnhloc.xnhkfpt.com/api')+'/tools/btachdownNew'" method="get">
			<input type="hidden" name="token" :value="token" />
			<input type="hidden" name="posterids" :value="posterids" />
			<input type="hidden" name="producttype" value="poster" />
		</form>
		<iframe style="display: none;" id="iframe" src="" frameborder="0"></iframe>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	import imgIcon from '@/assets/images/home/img_icon.svg'
	import selectedIcon from '@/assets/images/home/selected.svg'
	import noPoster from '@/assets/images/home/no-poster.png'

	import qs from 'qs'
	import { Loading } from 'element-ui';
	import { getCookie, baseUrl, encryptDes } from '@/utils/common'
	import clipboard from "@/directive/clipboard/clipboard.js";

	export default {
		name: 'Poster',
		directives: {
			clipboard: clipboard
		},
		data() {
			return {
				imgIcon,
				selectedIcon,
				noPoster,
				
				location:location,
				token: getCookie('token'),
				totalCount: 0,
				selectMode: false,
				loading: false,
				shareVisible: false,
				posterids: '',
				qrcode: '', //用来生成二维码的链接
				searchData: {
					pagenow: 1,
					shownum: 15,
					searchname: '',
					orderbyflag: '',
					productType: sessionStorage.getItem('producttype') == 'home' ? this.$route.params.type : sessionStorage.getItem('producttype'),
					fileType: '',
				},
				swiperOption: {
					direction: "horizontal",
					loop: true,
					loopAdditionalSlides: 1,
					speed: 500,
					autoplay: false,
					navigation: {
						prevEl: ".swiper-button-prev",
						nextEl: ".swiper-button-next",
					}
				},
				selectObj: {},
				recommendList: [],
				typeList: [{
						name: '全部素材',
						val: '',
						hide: true,
					},
					{
						name: '企业彩铃',
						val: 'ring',
						hide: true,
					},
					{
						name: '视频彩铃',
						val: 'qwvedio',
						hide: true,
					},
					{
						name: '视频统付',
						val: 'qwvediotf',
						hide: true,
					},
					{
						name: '挂机短信',
						val: 'hangup',
						hide: true,
					},
					{
						name: '400电话',
						val: 'fourhundred',
						hide: true,
					},
					{
						name: '400增值业务',
						val: 'fourhundredadd',
						hide: true,
					},
					{
						name: '企业彩印',
						val: 'callshow',
						hide: true,
					},
					{
						name: '企业秀',
						val: 'hfive',
						hide: true,
					},
					{
						name: '铃音录制',
						val: 'Ringmake',
						hide: true,
					},

					{
						name: '小程序',
						val: 'smallprogram',
						hide: true,
					},
					{
						name: '号码认证',
						val: 'phoneauth',
						hide: true,
					},
					{
						name: '号卡',
						val: 'telcard',
						hide: true,
					},
					{
						name: '视频制作',
						val: 'vediomake',
						hide: true,
					},
					{
						name: '佣金管理',
						val: 'commission',
						hide: true,
					},
					{
						name: '企业法务',
						val: 'lawpro',
						hide: true,
					},
					{
						name: '企业财税',
						val: 'taxpro',
						hide: true,
					},
					{
						name: '400号码绑定',
						val: 'fourhundredbinding',
						hide: true,
					},
					{
						name: '手机靓号',
						val: 'flyphone',
						hide: true,
					},
					{
						name: '乐会员',
						val: 'leclub',
						hide: true,
					},
					{
						name: '地图标注',
						val: 'map',
						hide: true,
					},
				],
				list: [],
			}
		},
		computed: {
			routeName() {
				return this.$route.name
			}
		},
		mounted() {
			this.getData()
			this.getRecommendList()
			this.getPosterCount()
		},
		methods: {
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},
			search() {
				this.searchData.pagenow = 1
				this.getData()
			},
			getData() {
				console.log(this.searchData)
				this.loading = true
				this.list = []
				let loadingInstance = Loading.service({
					fullscreen: false,
					target: '#posterList',
					text: '加载中'
				});
				this.$request.queryPosterList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							var list = res.objlist || []
							list.forEach((item) => {
								item.inputtime = new Date(item.inputtime.replace(/-/g, '/')).Format('yyyy-MM-dd')
								item.selected = false
							})
							this.list = list
							this.totalCount = res.page.totalresult
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
						loadingInstance.close();
					})
			},
			getRecommendList() {
				this.$request.queryPosterList({
					orderbyflag: 'newtimedesc',
					shownum: 20,
					notNowProduct: "1",
					productType: sessionStorage.getItem('producttype') == 'home' ? '' : sessionStorage.getItem('producttype'),
				}).then(res => {
					if(res.code == 0) {
						this.recommendList = res.objlist || []
						console.log(this.recommendList)
					} else {
						this.msgError(res.msg)
					}
				})
			},
			getPosterCount() {
				this.$request.getPosterCount().then(res => {
					if(res.code == 0) {
						var list = res.objlist

						this.typeList.forEach((type, index) => {
							type.hide = true
							list.forEach(item => {
								if(type.val == item.nameflag) {
									this.$set(this.typeList[index], 'hide', false)
								}
							})
						})
					} else {
						this.msgError(res.msg)
					}
				})
			},
			cancelSelect() {
				this.selectMode = false
				for(var i = 0; i < this.list.length; i++) {
					this.list[i].selected = false
				}
			},
			share(obj) {
				var baseUrl=window.location.protocol+(location.host.includes('localhost')?'//xnhloc.xnhkfpt.com/api':location.host.includes('xnh.xnhkfpt.com')?'//xnh.xnhkfpt.com/vueapi/api':'//xnhloc.xnhkfpt.com/api')
				this.addPosterPV(obj.posterid)
				this.selectObj = obj
				this.qrcode = baseUrl+'/order/poster/getsharefile?fileurl='+obj.imgurl+'&postid='+obj.posterid+'&token='+getCookie('token')
				console.log(this.qrcode)
				this.shareVisible = true
				this.$nextTick(() => {
					this.crateQrcode()
				})
			},
			// 生成二维码
			crateQrcode() {
				this.qr = new QRCode('qrcode', {
					width: 170,
					height: 170, // 高度
					text: this.qrcode 
				})
			},
			addPosterPV(posterid) {
				this.$request.addPosterPV({
					posterid: posterid
				}).then(res => {
					if(res.code == 0) {

					} else {

					}
				})
			},
			confirmDownload() {
				var ids = []
				for(var i = 0; i < this.list.length; i++) {
					if(this.list[i].selected) {
						ids.push(this.list[i].posterid)
					}
				}
				if(!ids.length) {
					this.msgError('请先勾选数据')
					return
				}
				this.$confirm('确定要批量下载已选择的海报吗？', '批量下载', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					this.batchDownload(ids.join(','))
					this.selectMode = false
					for(var i = 0; i < this.list.length; i++) {
						this.list[i].selected = false
					}
				}).catch(() => {});

			},
			//批量下载海报
			batchDownload(ids) {
				let params = {
					posterids: ids,
					producttype: 'poster'
				}
				this.posterids = ids
				console.log(this.posterids)
				this.$nextTick(() => {
					this.$refs.form.submit()
				})
			},
		}
	}
</script>

<style lang="scss" scoped="">
	.w1200 {
		padding-top: 98px!important;
		.content {
			margin: 0 auto;
			width: 970px;
			position: relative;
			.type-list {
				width: 220px;
				background: #fff;
				margin-right: 10px;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				background: #fff;
				overflow: hidden;
				.list-title {
					width: 100%;
					height: 80px;
					text-align: center;
					line-height: 80px;
					font-size: 16px;
					color: #333;
					font-weight: bold;
					position: relative;
					.img-icon {
						width: auto;
						height: 22px;
						position: absolute;
						left: 39px;
						top: 0;
						bottom: 0;
						margin: auto 0;
					}
				}
				.type-list-inner {
					overflow: auto;
					.list-item {
						height: 50px;
						text-align: center;
						line-height: 50px;
						font-size: 16px;
						color: #333;
						cursor: pointer;
						&:hover {
							color: #0088EA;
						}
					}
					.selected-type {
						color: #fff;
						background: #0088EA;
						&:hover {
							color: #fff;
						}
					}
				}
			}
			.poster-content {
				width: 970px;
				background: #fff;
				padding: 0 10px;
				.poster-top {
					padding: 20px 0 19px;
					border-bottom: 1px solid #eee;
					.form-item {
						margin-bottom: 0;
						float: left;
						.form-item-title {
							width: 60px;
						}
						.form-item-content {
							width: 120px;
							>>>.el-radio-button{
								margin-left: 8px;
								
								.el-radio-button__inner{
									border-left: 1px solid #DCDFE6;
									border-radius: 4px;
									box-shadow: none;
									width: 70px;
								}
							}
						}
					}
				}
				.poster-list {
					width: 100%;
					padding: 20px 10px 0;
					overflow: hidden;
					.poster-list-inner {
						width: 970px;
						overflow: auto;
						.poster-wrap {
							width: 930px;
							min-height: 354px;
							@include flex;
							justify-content: flex-start;
							flex-wrap: wrap;
							.loading {
								text-align: center;
								font-size: 14px;
								color: #409EFF;
							}
						}
					}
				}
				.poster-item {
					width: 170px;
					height: 334px;
					margin-bottom: 20px;
					margin-right: 20px;
					position: relative;
					&:nth-child(5n+5) {
						margin-right: 0;
					}
					.poster-box {
						width: 170px;
						height: 300px;
						position: relative;
						text-align: left;
						border-radius: 6px;
						overflow: hidden;
						.resource-wrap {
							width: 100%;
							height: 100%;
							position: relative;
							background: #000;
							img,
							video {
								max-width: 100%;
								max-height: 100%;
							}
						}
						.hover-wrap {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
							background: rgba(0, 0, 0, .6);
							opacity: 0;
							padding: 0 10px;
							transition: opacity .3s;
							overflow: hidden;
							.time {
								font-size: 12px;
								color: #fff;
								line-height: 22px;
								padding-top: 7px;
							}
							.desc {
								position: absolute;
								width: 100%;
								left: 0;
								padding: 0 13px;
								bottom: 61px;
								font-size: 12px;
								color: #fff;
								line-height: 22px;
								max-height: 132px;
								overflow: hidden;
							}
							.desc-input {
								position: absolute;
								left: -1000px;
								top: 0;
							}
							.copy-btn {
								width: 84px;
								height: 24px;
								background: #0088EA;
								border-radius: 12px;
								line-height: 24px;
								text-align: center;
								color: #fff;
								font-size: 12px;
								cursor: pointer;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 20px;
								margin: 0 auto;
							}
						}
						&:hover {
							.hover-wrap {
								opacity: 1;
							}
						}
						.el-icon-video-play {
							width: 40px;
							height: 40px;
							font-size: 40px;
							color: #fff;
						}
					}
					.select-box {
						width: 100%;
						height: 100%;
						border: 1px solid #ccc;
						position: absolute;
						left: 0;
						top: 0;
						transition: all .3s;
						border-radius: 6px;
						.poster-check-box {
							position: absolute;
							width: 16px;
							height: 16px;
							right: -1px;
							top: -1px;
							border: 1px solid #ccc;
							border-top-right-radius: 6px;
							transition: all .3s;
							border-right-top-radius: 6px;
							background: #fff;
							.ckecked-icon {
								width: 12px;
								height: 10px;
							}
						}
					}
					.selected {
						border: 1px solid #0088EA;
						.poster-check-box {
							border: 1px solid #0088EA;
							border-top-right-radius: 6px;
							.selected-icon {
								position: absolute;
								left: 0;
								right: 0;
								top: 2.5px;
								margin: 0 auto;
							}
						}
					}
					.poster-btn-wrap {
						padding: 10px 10px 0;
						@include flex;
						justify-content: space-between;
						.poster-btn {
							width: 50px;
							height: 24px;
							background: #FFFFFF;
							border: 1px solid #0088EA;
							border-radius: 12px;
							line-height: 22px;
							text-align: center;
							color: #0088EA;
							cursor: pointer;
							font-size: 12px;
						}
						.primary {
							background: #0088EA;
							color: #fff;
						}
					}
				}
				.poster-bottom {
					width: 100%;
					.el-pagination {
						padding: 12px 0 20px;
					}
				}
				.btn-wrap {
					padding: 4px 0 20px;
					.el-button {
						width: 120px;
						padding: 9px 20px;
					}
				}
				.recomend-block {
					padding-bottom: 20px;
					position: relative;
					.recomend-title {
						font-size: 18px;
						color: #666;
						font-weight: bold;
						border-bottom: 1px solid #ddd;
						line-height: 60px;
						text-align: left;
						padding: 0 5px;
						margin: 0 5px;
					}
					>>>.swiper-container {
						width: 100%;
						height: 354px;
						.swiper-slide {
							margin-bottom: 0;
							margin-right: 0;
							overflow: hidden;
							.poster-item {
								float: left;
							}
						}
					}
					.swiper-button-wrap {
						position: absolute;
						left: 0;
						right: 0;
						width: 100%;
						height: 354px;
						top: 61px;
						.swiper-button-prev {
							width: 30px;
							height: 30px;
							left: -6px;
							background: url(../../assets/images/home/prev.svg);
							box-shadow: 0 0 10px rgba(0, 0, 0, .2);
							border-radius: 50%;
						}
						.swiper-button-next {
							width: 30px;
							height: 30px;
							right: -6px;
							background: url(../../assets/images/home/next.svg);
							box-shadow: 0 0 10px rgba(0, 0, 0, .2);
							border-radius: 50%;
						}
					}
				}
			}
		}
		.width1200 {
			width: 1200px;
			padding-left: 230px;
		}
		>>>.el-dialog__header {
			height: 62px;
			line-height: 61px;
			border-bottom: 1px solid #eee;
			padding: 0 10px;
			margin: 0 20px;
			text-align: left;
		}
		>>>.el-dialog__body {
			padding: 30px 20px;
			.share-content {
				padding: 0 10px;
				.img-wrap {
					width: 250px;
					height: 442px;
					position: relative;
					border-radius: 6px;
					overflow: hidden;
					background: #000;
					img,
					video {
						max-width: 100%;
						max-height: 100%;
					}
					.el-icon-video-play {
						width: 50px;
						height: 50px;
						font-size: 50px;
						color: #fff;
					}
				}
				.code-block {
					position: relative;
					overflow: hidden;
					width: 250px;
					.share-title {
						font-size: 14px;
						color: #333;
						font-weight: bold;
						margin-bottom: 18px;
					}
					.code-wrap {
						width: 190px;
						height: 190px;
						background: #FFFFFF;
						border: 1px solid #EEEEEE;
						border-radius: 6px;
						position: relative;
						margin: 0 auto;
						img {
							width: 170px;
							height: 170px;
							position: absolute;
							left: 9px;
							top: 9px;
						}
					}
					.share-desc {
						width: 230px;
						font-size: 14px;
						color: #666;
						line-height: 24px;
						margin: 24px auto 16px;
					}
					#shareDesc {
						position: absolute;
						left: -1000px;
					}
					.copy-btn2 {
						width: 140px;
						height: 36px;
						text-align: center;
						line-height: 36px;
						color: #fff;
						font-size: 14px;
						cursor: pointer;
						background: #0088EA;
						border-radius: 18px;
						margin: 0 auto;
					}
				}
			}
		}
	}
	
	.ring-top {
		width: 100%;
		background: #fff;
		padding-top: 167px!important;
	}
	.no-poster{
		margin: 43px auto 60px;
		.no-poster-img{
			width: 360px;
			height: 220px;
		}
		.no-poster-text{
			line-height: 64px;
			text-align: center;
			color: #666;
			font-size: 18px;
		}
	}
</style>